<!--
 * @Date: 2020-08-07 10:39:01
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-09-29 16:57:58
 * @Description: file content
-->
<template>
  <div class="home-content">
    <!-- 先初始化 BE2Viewer -->
    <BE2Viewer ref="BE2Viewer" :show-menu="showMenu" :type="1" @close="close" />
    <div class="home-menu">
      <NavMenu :list="list" @layerChange="layerChange"></NavMenu>
    </div>
  </div>
</template>
<script>
import NavMenu from '@/components/navMenu/index.vue'
import BE2Viewer from '@/components/BE2Viewer'
import expert from '@/assets/images/expert.png' // 专家组
import mailList from '@/assets/images/mailList.png' // 通讯录
import contactPoint from '@/assets/images/contactPoint.png' // 负责人联络点
import resettlement from '@/assets/images/resettlement.png' // 避灾安置点
import rescueTeam from '@/assets/images/rescueTeam.png' // 救援队伍
import materialPoint from '@/assets/images/materialPoint.png' // 应急物资点
import affectedArea from '@/assets/images/affectedArea.png' // 设置受灾区

import expertClick from '@/assets/images/expert-click.png' // 专家组
import mailListClick from '@/assets/images/mailList-click.png' // 通讯录
import contactPointClick from '@/assets/images/contactPoint-click.png' // 负责人联络点
import resettlementClick from '@/assets/images/resettlement-click.png' // 避灾安置点
import rescueTeamClick from '@/assets/images/rescueTeam-click.png' // 救援队伍
import materialPointClick from '@/assets/images/materialPoint-click .png' // 应急物资点
import affectedAreaClick from '@/assets/images/affectedArea-click.png' // 设置受灾区

export default {
  name: 'Home',
  data () {
    return {
      newPoint: [],
      list: [
        {
          tag: 'zy',
          text: '应急资源',
          show: false,
          childs: [
            {
              tag: 'zy-zjz',
              text: '专家组',
              icon: expert,
              clickIcon: expertClick,
              selected: false,
              childs: []
            },
            {
              tag: 'zy-txl',
              text: '通讯录',
              icon: mailList,
              clickIcon: mailListClick,
              selected: false,
              childs: []
            },
            {
              tag: 'zy-fzrlld',
              text: '负责人联络点',
              icon: contactPoint,
              clickIcon: contactPointClick,
              selected: false,
              childs: [
                {
                  tag: 'zy-fzrlld-xz',
                  text: '乡镇街道',
                  icon: '',
                  clickIcon: '',
                  selectedThird: false
                },
                {
                  tag: 'zy-fzrlld-cq',
                  text: '村，社区',
                  icon: '',
                  clickIcon: '',
                  selectedThird: false
                }
              ]
            },
            {
              tag: 'zy-bzazd',
              text: '避灾安置点',
              icon: resettlement,
              clickIcon: resettlementClick,
              selected: false,
              childs: []
            },
            {
              tag: 'zy-jydw',
              text: '救援队伍',
              icon: rescueTeam,
              clickIcon: rescueTeamClick,
              selected: false,
              childs: []
            },
            {
              tag: 'zy-yjwzd',
              text: '应急物资点',
              icon: materialPoint,
              clickIcon: materialPointClick,
              selected: false,
              childs: [
                {
                  tag: 'zy-yjwzd-bxq',
                  text: '部门，乡镇，企业物资点',
                  icon: '',
                  clickIcon: '',
                  selectedThird: false
                },
                {
                  tag: 'zy-yjwzd-cq',
                  text: '村，社区物资点',
                  icon: '',
                  clickIcon: '',
                  selectedThird: false
                }
              ]
            }
          ]
        },
        {
          tag: 'sj',
          text: '数据资源',
          show: false,
          childs: [
            {
              tag: 'sj-slgc',
              text: '德清防汛信息综合查询系统',
              icon: '',
              target: 'http://116.62.228.150:8084/xjxly/rain.aspx',
              selected: false,
              childs: []
            },
            {
              tag: 'sj-yqjc',
              text: '德清智慧水利系统',
              icon: '',
              target: 'http://61.175.121.68:9001/Login/Login_DQZHSL.aspx?url=http://61.175.121.68:9001/MAIN/BootPage.aspx',
              selected: false,
              childs: []
            }
          ]
        },
        {
          tag: 'xy',
          text: '应急响应',
          show: false,
          childs: []
        },
        {
          tag: 'dd',
          text: '应急调度',
          show: false,
          childs: [
            {
              tag: 'dd-setting',
              text: '设置受灾区',
              icon: affectedArea,
              clickIcon: affectedAreaClick,
              selected: false,
              childs: []
            },
            {
              tag: 'dd-exper',
              text: '专家库',
              icon: expert,
              clickIcon: expertClick,
              selected: false,
              childs: []
            }
          ]
        },
        {
          tag: 'ht',
          text: '后台管理',
          show: false,
          childs: []
        }
      ],
      showMenu: ''
    }
  },
  components: {
    NavMenu,
    BE2Viewer
  },
  created () {
    // token写入缓存
    // localStorage.setItem(
    //   'token',
    //   'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwiYXBpcyI6Ii9wYXJ0eS9nZXRPayIsImlzcyI6ImFkbWluIiwiaWQiOiIxIiwiZXhwIjoxNjAxMjc3Njg5LCJpYXQiOjE2MDA2NzI4ODl9.iXas3KGmP1yTjHDXAyd3UVe9poiDM9QVgR3Rv3OjDuU'
    // )
    // this.$nextTick(() => {
    //   this.$refs.BE2Viewer.addPoints2('1', 119.93672, 30.56449)
    // })
  },
  methods: {
    // 菜单点击事件
    layerChange (tag, show = false) {
      this.showMenu = tag
      this.$refs.BE2Viewer.$refs.basePopup.close()
      if (tag !== 'dd-setting' && tag !== 'dd-exper') {
        this.$refs.BE2Viewer.removeText() // 删除文字
        this.$refs.BE2Viewer.viewer.entities.removeAll()
      }
      if (tag !== 'dd' && tag !== 'dd-setting' && tag !== 'dd-exper') {
        console.log(this.$refs.BE2Viewer.pointlist)
        if (this.$refs.BE2Viewer.pointlist.length !== 0) {
          this.$refs.BE2Viewer.pointlist.forEach(item => {
            const wz = document.getElementById('zxdwz' + item.id)
            if (wz) {
              wz.parentNode.removeChild(wz)
            }
          })
        }
      }
      if (tag === 'dd' && show) {
        this.$refs.BE2Viewer.getaffectedpointlist()
      }
      if (tag === 'dd-exper') {
        localStorage.setItem('id', '')
        // if (this.$refs.BE2Viewer.pointlist.length !== 0) {
        //   this.$refs.BE2Viewer.pointlist.forEach(item => {
        //     console.log(item)
        //     const wz = document.getElementById('zxdwz' + item.id)
        //     if (wz) {
        //       wz.parentNode.removeChild(wz)
        //     }
        //   })
        // }
      }
    },
    close () {
      console.log('shibail')
      this.showMenu = ''
    }
    // 测试获取数据 测试随机的数据 必须的数据  lat 维度 lng 经度 img 图片
    // test() {
    //   const data = []
    //   // lat 维度 lng 经度 img 图片 caseadd 120.9677706, 30.7985748
    //   for (let i = 0; i < 10; i++) {
    //     data.push({
    //       lng: 120.9677706 + Math.random() / 100,
    //       lat: 30.7985748 + Math.random() / 100,
    //       img: caseadd,
    //       queryId: i + Math.random() // 是个可以在自定义的popup中props获取到 此处只是举例
    //     })
    //   }
    //   return data
    // }
  }
}
</script>
<style scoped lang="scss">
.home-content {
  position: relative;
  height: 100vh;
  width: 100vw;
}
.home-menu {
  position: absolute;
  top: calc(100vh - 4.6vh);
  left: calc(50vw);
  transform: translateX(-50%);
  height: 50px;
  width: 875px;
  z-index: 999999;
}
.searchNav {
  padding: 1%;
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 11;
  position: absolute;
  left: 0;
  top: 0;
  .searchForm {
    width: 30%;
    height: 40px;
    display: flex;
    align-items: center;
    text-align: center;
    position: relative;
    background: RGBA(101, 116, 114, 1);
  }
  .search_text {
    height: 100%;
    padding: 10px;
    background: #4b5352;
    color: #fff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    img {
      margin-left: 5px;
    }
  }
  input {
    height: 100%;
    border: none;
    outline: none;
    margin-right: 1%;
    background: none;
    color: rgba(255, 255, 255, 0.9);
    padding-left: 2%;
  }
  ::-webkit-input-placeholder {
    color: #fff;
  }
  :-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
  }
  ::-moz-placeholder {
    /* Firefox 19+ */
    color: #fff;
  }
  :-ms-input-placeholder {
    color: #fff;
  }
  .search_btn {
    width: 20%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    background: rgba(165, 173, 160);
    color: #fff;
    img {
      width: 22px;
      height: 22px;
      background: #cacaca;
      margin-right: 5px;
    }
  }
  .titleInfo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    text-align: center;
  }
  .excel {
    position: absolute;
    right: 5%;
    text-align: center;
    .excelBtn {
      width: 140px;
      height: 40px;
      background: rgba(39, 48, 34, 1);
      border: 2px solid rgba(144, 137, 104, 1);
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}
.container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 7%;
  left: 0;
  padding: 1%;
  display: flex;
  justify-content: space-between;
  .leftInfo {
    display: flex;
    z-index: 9999;
    .overseasAffairs {
      padding-left: 3%;
    }
  }
  .rightInfo {
    width: 33vw;
    z-index: 9999;
    .topInfo {
      display: flex;
    }
    .base {
      height: 60vh;
      width: 15vw;
    }
    .parties {
      margin-left: 10px;
      height: 60vh;
      width: 15vw;
    }
    .example {
      margin-top: 20px;
      // height: 240px;
      width: 33vw;
      // background-image: url('~@/assets/images/example.png');
      // background-size: 100% 100%;
    }
  }
}
</style>
